<template>
  <div class="pageBox">
    <head-component title="商品详情" :borderStatus="false"></head-component>
    <div class="swipeBox">
      <van-swipe @change="onChange">
        <van-swipe-item>
          <video class="videoObj" src="" controls></video>
        </van-swipe-item>
        <van-swipe-item v-for="(item, index) in swipeData" :key="index">
          <img class="banner" :src="item.image" alt="" />
        </van-swipe-item>
        <template #indicator>
          <div class="custom-indicator">
            {{ active + 1 }}/{{ swipeData.length + 1 }}
          </div>
        </template>
      </van-swipe>
    </div>

    <div class="priceBox">
      <div class="price flex">
        <p>￥39.9</p>
        <del>￥59.9</del>
      </div>
      <div class="title">小怡室集 衣物留香珠220g持久留香</div>
    </div>

    <div class="line"></div>

    <div class="detailsBox">
      <div class="detailsTitle">商品详情</div>
      <div class="con"></div>
    </div>

    <img
      class="fanhuidingbu_btn"
      src="@/image/home/fanhuidingbu_btn.png"
      alt=""
      @click="onBackTop"
    />

    <div class="bottom flex-between">
      <div class="bottomLeft flex">
        <div class="leftItem flex-center">
          <img src="@/image/home/gouwuche.png" alt="" />
          <p>购物车</p>
        </div>
      </div>
      <div class="rightItem flex-row">
        <button class="addCart" @click="onAddCart">加入购物车</button>
        <button class="buy" @click="onBuy">立即购买</button>
      </div>
    </div>

    <van-popup v-model:show="show" position="bottom" round>
      <div class="popupBox">
        <div class="popupTop flex-row">
          <img class="popupTopImg" src="../../image/home/banner.png" alt="" />
          <div class="popupRight">
            <p>￥39.9</p>
            <span>小怡室集 衣物留香珠220g</span>
          </div>
        </div>

        <div class="skuBox">
          <div class="sku" v-for="item in skuList" :key="item.oneId">
            <div class="skuTitle">{{ item.oneTitle }}</div>
            <div class="skuCon flex-between">
              <button
                :class="[item2.twoStatus ? 'skuItem skuActive' : 'skuItem']"
                v-for="item2 in item.children"
                :key="item2.twoId"
                @click="onSkuItem(item, item2)"
              >
                {{ item2.twoTitle }}
              </button>
            </div>
          </div>
        </div>

        <div class="stepBox flex-between">
          <p>购买数量</p>
          <van-stepper v-model="stepValue" />
        </div>

        <div class="popupBtnBox flex-between">
          <button class="popupAddCart" @click="onPopupAddCart">
            加入购物车
          </button>
          <button class="popupBuy" @click="onPopupBuy">立即购买</button>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script type="text/ecmascript-6">
import { Toast } from "vant";
import { defineComponent, ref } from "vue";
import headComponent from "../../components/headComponent.vue";
import router from "../../router";

export default defineComponent({
  components: {
    headComponent,
  },
  setup() {
    const id = ref(
      router.currentRoute.value.query.id
        ? router.currentRoute.value.query.id
        : ""
    );
    const active = ref(0);
    const swipeData = ref([
      {
        sid: 1,
        image: require("../../image/home/banner.png"),
      },
      {
        sid: 2,
        image: require("../../image/home/banner.png"),
      },
      {
        sid: 3,
        image: require("../../image/home/banner.png"),
      },
    ]);
    const show = ref(false);

    const skuList = ref([
      {
        oneId: 1,
        oneTitle: "尺码",
        oneStatus: false,
        children: [
          {
            twoId: 11,
            twoTitle: "S",
            twoStatus: false,
          },
          {
            twoId: 12,
            twoTitle: "M",
            twoStatus: false,
          },
          {
            twoId: 13,
            twoTitle: "L",
            twoStatus: false,
          },
          {
            twoId: 14,
            twoTitle: "XL",
            twoStatus: false,
          },
        ],
      },
      {
        oneId: 2,
        oneTitle: "颜色",
        oneStatus: false,
        children: [
          {
            twoId: 21,
            twoTitle: "红色",
            twoStatus: false,
          },
          {
            twoId: 22,
            twoTitle: "黄色",
            twoStatus: false,
          },
          {
            twoId: 23,
            twoTitle: "蓝色",
            twoStatus: false,
          },
          {
            twoId: 24,
            twoTitle: "绿色",
            twoStatus: false,
          },
        ],
      },
    ]);

    const stepValue = ref(1); // 步进器

    const isChecked = ref(false); // 是否选中

    function onChange(index) {
      active.value = index;
    }

    // 回到顶部
    function onBackTop() {
      document.documentElement.scrollTop = 0;
    }

    // 点击页面底部加入购物车
    function onAddCart() {
      show.value = true;
    }

    // 点击页面底部立即购买
    function onBuy() {
      show.value = true;
    }

    function onSkuItem(param, param2) {
      // console.log(param, param2);
      skuList.value.forEach((item) => {
        if (item.oneId == param.oneId) {
          item.oneStatus = true;
          console.log(item.oneTitle);
          item.children.forEach((item2) => {
            item2.twoStatus = false;
            if (item2.twoId == param2.twoId) {
              console.log(item2.twoTitle);
              item2.twoStatus = true;
            }
          });
        }
      });
    }

    //弹窗加入购物车
    function onPopupAddCart() {
      onSkuStatus(1);
    }

    //弹窗立即购买
    function onPopupBuy() {
      onSkuStatus(2);
    }

    //  是否选择规格
    function onSkuStatus(type) {
      //type:1 加入购物车  type:2 立即购买
      for (let i = 0; i < skuList.value.length; i++) {
        isChecked.value = false;
        for (let j = 0; j < skuList.value[i].children.length; j++) {
          if (skuList.value[i].children[j].twoStatus) {
            isChecked.value = true;
            break;
          }
        }
        if (!isChecked.value) {
          Toast("请选择" + skuList.value[i].oneTitle);
          break;
        }
      }

      if (isChecked.value) {
        if (type == 1) {
          console.log("弹窗加入购物车");
        } else {
          console.log("弹窗立即购买");
          router.push({
            path: "/submitOrders",
          });
        }
      }
    }

    return {
      id,
      active,
      swipeData,
      show,
      skuList,
      stepValue,
      onChange,
      onBackTop,
      onAddCart,
      onBuy,
      onSkuItem,
      onPopupAddCart,
      onPopupBuy,
      onSkuStatus,
    };
  },
});
</script>

<style scoped lang="less">
.pageBox {
  width: 100%;
  min-height: 100vh;
  padding-top: 88px;
  padding-bottom: 110px;
  .swipeBox {
    width: 100%;
    height: 750px;
    :deep(.van-swipe) {
      width: 100%;
      height: 750px;
    }
    :deep(.van-swipe-item) {
      width: 100%;
      height: 750px;
    }
    .custom-indicator {
      position: absolute;
      right: 30px;
      bottom: 20px;
      padding: 2px 5px;
      font-size: 12px;
      width: 80px;
      height: 46px;
      background: rgba(23, 24, 26, 0.5);
      border-radius: 26px;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 24px;
      font-weight: 400;
      color: #ffffff;
    }
    .videoObj {
      width: 100%;
      height: 100%;
    }
    .banner {
      width: 100%;
      height: 100%;
    }
  }
  .priceBox {
    height: 213px;
    background-color: #ffffff;
    padding: 40px 0 0 30px;
    .price {
      align-items: flex-end;
      p {
        font-size: 42px;
        font-weight: 500;
        color: #e00b12;
      }
      del {
        font-size: 28px;
        font-weight: 400;
        color: #cccccc;
        padding-bottom: 4px;
        padding-left: 22px;
      }
    }
    .title {
      font-size: 36px;
      font-weight: 500;
      color: #333333;
      margin-top: 24px;
    }
  }
  .line {
    width: 100%;
    height: 20px;
    background-color: #f5f5f5;
  }
  .detailsTitle {
    height: 105px;
    font-size: 32px;
    font-weight: 500;
    color: #333333;
    padding: 30px 0 0 33px;
  }
  .con {
    img {
      max-width: 100%;
    }
  }
  .fanhuidingbu_btn {
    width: 60px;
    height: 60px;
    position: fixed;
    bottom: 130px;
    right: 30px;
    z-index: 1;
  }
  .bottom {
    width: 100%;
    height: 110px;
    background: #ffffff;
    box-shadow: 0px -1px 0px 0px #dadee6;
    padding: 0 30px 0 46px;
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 1;
    .bottomLeft {
      width: 50%;
      .leftItem {
        flex-direction: column;
        img {
          width: 48px;
          height: 48px;
        }
        p {
          font-size: 20px;
          font-weight: 400;
          color: #808080;
          margin-top: 4px;
        }
      }
    }
    .rightItem {
      .addCart {
        width: 200px;
        height: 80px;
        background: #ffffff;
        border-radius: 100px 0px 0px 100px;
        border: 1px solid #e00b12;
        font-size: 26px;
        font-weight: 400;
        color: #e00b12;
      }
      .buy {
        width: 200px;
        height: 80px;
        background: linear-gradient(270deg, #b30b11 0%, #f50811 100%);
        border-radius: 0px 40px 40px 0px;
        font-size: 26px;
        font-weight: 400;
        color: #ffffff;
        border: 1px solid #e00b12;
      }
    }
  }
  .popupBox {
    padding: 30px;
    .popupTop {
      width: 100%;
      .popupTopImg {
        width: 180px;
        height: 180px;
        border-radius: 16px;
      }
      .popupRight {
        padding-left: 20px;
        p {
          font-size: 42px;
          font-weight: 500;
          color: #e00b12;
          margin-bottom: 10px;
        }
        span {
          font-size: 36px;
          font-weight: 500;
          color: #333333;
        }
      }
    }
    .skuBox {
      margin-top: 60px;
      .sku {
        margin-bottom: 69px;
        .skuTitle {
          font-size: 26px;
          font-weight: 400;
          color: #666666;
          margin-bottom: 14px;
        }
        .skuCon {
          flex-wrap: wrap;
          justify-content: flex-start;
          .skuItem {
            padding: 10px 20px;
            background: #f5f5f5;
            border-radius: 10px;
            font-size: 26px;
            font-weight: 400;
            color: #666666;
            border: none;
            margin: 20px 14px 0;
          }
          .skuActive {
            background: linear-gradient(270deg, #b30b11 0%, #f50811 100%);
            color: #ffffff;
          }
        }
      }
      .sku:nth-last-of-type(1) {
        margin-bottom: 0;
      }
    }
    .stepBox {
      margin-top: 60px;
      p {
        font-size: 26px;
        font-weight: 400;
        color: #616366;
      }
    }
    .popupBtnBox {
      margin-top: 80px;
      .popupAddCart {
        width: 330px;
        height: 80px;
        background: #ffffff;
        border-radius: 40px;
        border: 1px solid #e00b12;
        font-size: 32px;
        font-weight: 400;
        color: #e00b12;
      }
      .popupBuy {
        width: 330px;
        height: 80px;
        background: linear-gradient(270deg, #b30b11 0%, #f50811 100%);
        border-radius: 40px;
        font-size: 32px;
        font-weight: 400;
        color: #ffffff;
        border: 1px solid #e00b12;
      }
    }
  }
}
</style>